<ul class="notification-body">
    <li>
        <span class="padding-10 unread">

            <em class="badge padding-5 no-border-radius bg-color-blueLight pull-left margin-right-5">
                <i class="fa fa-user fa-fw fa-2x"></i>
            </em>

            <span>
                2 new users just signed up! <span class="text-primary">martin.luther</span> and <span class="text-primary">kevin.reliey</span>
                <br>
                <span class="pull-right font-xs text-muted">
                    <i>1 min ago...</i>
                </span>
            </span>

        </span>
    </li>
    <li>
        <span class="padding-10 unread">

            <em class="badge padding-5 no-border-radius bg-color-purple txt-color-white pull-left margin-right-5">
                <i class="fa fa-calendar fa-fw fa-2x"></i>
            </em>

            <span>
                <a href="javascript:void(0);" class="display-normal">
                    <strong>Calendar</strong>
                </a>: Sadi Orlaf invites you to lunch!
                <br>
                <strong>When: 1/3/2014 (1pm - 2pm)</strong><br>
                <span class="pull-right font-xs text-muted">
                    <i>3 hrs ago...</i>
                </span>
            </span>

        </span>
    </li>
    <li>
        <span class="padding-10">

            <em class="badge padding-5 no-border-radius bg-color-blueLight txt-color-white pull-left margin-right-5">
                <i class="fa fa-user fa-fw fa-2x"></i>
            </em>

            <span>
                <a href="javascript:void(0);" class="display-normal">Sofia</a> as contact? &nbsp;
                <button class="btn btn-xs btn-primary margin-top-5">accept</button>
                <button class="btn btn-xs btn-danger margin-top-5">reject</button>
                <span class="pull-right font-xs text-muted">
                    <i>3 hrs ago...</i>
                </span>
            </span>

        </span>
    </li>
    <li>
        <span class="padding-10">

            <em class="badge padding-5 no-border-radius bg-color-blue pull-left margin-right-5">
                <i class="fa fa-facebook fa-fw fa-2x"></i>
            </em>

            <span>
                Facebook recived +33 unique likes
                <br>
                <span class="pull-right font-xs text-muted">
                    <i>4 hrs ago...</i>
                </span>
            </span>

        </span>
    </li>
    <li>
        <span class="padding-10">

            <em class="badge padding-5 no-border-radius bg-color-green pull-left margin-right-5">
                <i class="fa fa-check fa-fw fa-2x"></i>
            </em>

            <span>
                2 projects were completed on time! Submitted for your approval - <a href="javascript:void(0);" class="display-normal">Click here</a>
                <br>
                <span class="pull-right font-xs text-muted">
                    <i>1 day ago...</i>
                </span>
            </span>

        </span>
    </li>
    <li>
        <span class="padding-10">

            <em class="badge padding-5 no-border-radius bg-color-greenLight pull-left margin-right-5">
                <i class="fa fa-lock fa-fw fa-2x"></i>
            </em>

            <span>
                Your password was recently updated. Please complete your security questions from your profile page.
                <br>
                <span class="pull-right font-xs text-muted">
                    <i>2 weeks ago...</i>
                </span>
            </span>

        </span>
    </li>
</ul>
